<template>
    <div>
        <basic-layout title="健康分析" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <div class="content">
                        <div class="item">
                            <h5><span class="icon"></span>基本信息</h5>
                            <div class="basic">
                                <div><span>姓名：</span>{{ user.name }}</div>
                                <div><span>性别：</span>{{ user.sex }}</div>
                                <div><span>年龄：</span>{{ user.age || '-' }}岁</div>
                                <div><span>身高：</span>{{ user.height || 0 }}CM</div>
                                <div><span>体重：</span>{{ user.weight || 0 }}KG</div>
                                <div><span>时间：</span>{{ user.name }}</div>
                                <div><span>二级单位：</span>{{ user.ejdw }}</div>
                                <div><span>三级单位：</span>{{ user.sjdw }}</div>
                            </div>
                        </div>
                        <div class="item">
                            <h5><span class="icon"></span>体检记录</h5>
                            <van-grid :border="true" class="dark">
                                <van-grid-item text="年龄" />
                                <van-grid-item text="单位" />
                                <van-grid-item text="体检机构" />
                                <van-grid-item text="体检日期" />
                            </van-grid>
                            <van-grid v-for="(val, index) in reportList" :key="index"
                                :class="(index + 1) % 2 == 0 ? 'dark' : ''">
                                <van-grid-item :text="val.age" />
                                <van-grid-item :text="val.sjdw" />
                                <van-grid-item :text="val.orgName" />
                                <van-grid-item :text="val.uploadTime" />
                            </van-grid>

                        </div>
                        <div class="item">
                            <h5><span class="icon"></span>健康指标监测</h5>
                            <div class="charts" style="width: 100%; height: 400px">
                                <div ref="echartMonitoring" style="width: 100%; height: 400px"></div>
                            </div>
                        </div>
                        <div class="item">
                            <h5><span class="icon"></span>健康指标监测</h5>
                            <div class="charts" style="width: 100%; height: 400px">
                                <div ref="echartBp" style="width: 100%; height: 400px"></div>
                            </div>
                        </div>
                    </div>
                </van-row>
            </div>
        </basic-layout>
        <fullLoading v-if="loading"></fullLoading>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { appAnalyze } from '@/api/realAssets/rvhealth/report';
export default {
    data() {
        return {
            showEmpCharts: true,
            loading: false,
            user:{},
            userInfo: {},
            reportList:[],
            columns: [{
                key: 'age',
                prop: 'age',
                title: '年龄',
                slot: 'clickable'
            }],
            tableData: [{
                id: 1,
                age: 42,
                depat: '国网黄冈黄梅夏安工地公司',
                org: '国网机构',
                time: '2025-05-06'
            }, {
                id: 1,
                age: 42,
                depat: '国网黄冈黄梅夏安工地公司',
                org: '国网机构',
                time: '2025-05-06'
            }]
        };
    },
    created() {
        if (sessionStorage.getItem("userInfo")) this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    },
    mounted() {
        this.getAppAnalyze()
    },
    methods: {
        getAppAnalyze(){
            appAnalyze(this.userInfo.userId).then(res=>{
                this.initChart(res.data.data.weightBmiList)
                this.initBpChart(res.data.data.bloodPressureList)
                this.user = res.data.data.empInfo
                this.reportList = res.data.data.reportList 
            })
        },
        initChart(chartData) {
            let getchart = echarts.init(this.$refs.echartMonitoring);
            var option = {
                color: ['#337AFA'],
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            title: "下载图表",
                        },
                    },
                },
                tooltip: {},
                xAxis: {
                    type: "category",
                    data: chartData.length ? chartData.map(item=>item.time) : [],
                },
                yAxis: {
                    name: "体重指数BMI",
                    type: "value",
                    nameTextStyle: {
                        color: '#337AFA',
                        align: 'left',
                    }
                },
                series: [ {
                    data:  chartData.length ? chartData.map(item=>{return item.value ? item.value : 0}) : [],
                    type: "line",
                    
                }],
            };
            getchart.setOption(option, true);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                getchart.resize();
            });
        },
        initBpChart(chartData) {
            let getchart = echarts.init(this.$refs.echartBp);
            var option = {
                color: ['#07C160','#337AFA'],
                legend: {
                    data: ['收缩压','舒张压'],
                    bottom: '0'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            title: "下载图表",
                        },
                    },
                },
                tooltip: {},
                xAxis: {
                    type: "category",
                    data: chartData.length ? chartData.map(item=>item.time) : [],
                },
                yAxis: {
                    name: "血压监测",
                    type: "value",
                    nameTextStyle: {
                        color: '#337AFA',
                        align: 'left',
                    }
                },
                series: [ {
                    data: chartData.length ? chartData.map(item=>item.systolicPressure) : [] ,
                    type: "line",
                    name:'收缩压'
                }, {
                    data: chartData.length ? chartData.map(item=>item.diastolicPressure) : [] ,
                    type: "line",
                    name:'舒张压'
                }],
            };
            getchart.setOption(option, true);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                getchart.resize();
            });
        },
    }
};
</script>

<style scoped lang="less">
.listCon {
    padding-top: 6px;

    .content {
        height: 100%;
        overflow: auto;

        .title {
            line-height: 20px;
            padding: 15px 10px;
            font-size: 13px;
            box-sizing: border-box;
            background: #fff;
            box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
            border-radius: 5px;
        }

        .item {
            padding: 0 10px 15px;
            background: #fff;
            box-sizing: border-box;
            font-size: 12px;
            box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
            border-radius: 5px;
            margin: 10px 0;
            min-height: 100px;

            h5 {
                line-height: 40px;
                margin: 0;
                font-size: 14px;
                display: flex;
                align-items: center;

                .icon {
                    display: block;
                    width: 4px;
                    height: 14px;
                    background: #337AFA;
                    border-radius: 2px;
                    margin-right: 5px;
                }
            }

            p {
                text-indent: 2em;
                line-height: 20px;
            }

            .basic {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                div {
                    width: 48%;
                    padding: 5px 0;
                    span {
                        color: #6D6D6D;
                    }
                }
            }
        }
    }
}

.dark {
    :deep(.van-grid-item__content) {
        background: #E8F0FF;
        color: #111111;
        padding: 8px 10px;
    }
}
</style>